<template>
  <view class="shopdetail">
    <view class="neirong">
      <!-- 轮播图 -->
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" @click="previewImage($event)">
        <swiper-item v-for="(item,index) in good.pics" :key="item.pics_id">
          <view class="swiper-item">
            <img :src="item.pics_mid_url" :data-src="item.pics_mid_url" alt="图片加载失败!"/>
          </view>
        </swiper-item>
      </swiper>
      <!-- 轮播图下面名称 -->
      <view class="shopprices">
        <view class="money">
          ￥{{good.goods_price}}
        </view>
        <view class="nameandSC">
          <view class="name">
            {{good.goods_name}}
          </view>
          <view class="shoucang" v-if="!good.is_collected" @click="shoucang(true)">
            <view class="icon">
              <van-icon name="star-o"></van-icon>
            </view>
            <view class="shoucangzi">
              收藏
            </view>
          </view>
          <view class="shoucang" v-else @click="shoucang(false)">
            <view class="icon">
              <van-icon name="star"></van-icon>
            </view>
            <view class="shoucangzi">
              已收藏
            </view>
          </view>
        </view>
        <view class="myf">
          快递：免运费
        </view>
      </view>
      <!-- 促销以及已选区域 -->
      <view class="cu_xuan">
        <view class="cuxiao">
          <span>促销</span>
          <span>满300减30</span>
        </view>
        <view class="yixuan">
          <span>已选</span>
          <span>黑色/S/1件</span>
        </view>
      </view>
      <!-- 选择收货地址区域 -->
      <view class="buyaddr">
        <view class="left">
          <span>送至</span>
          <span>请选择收货地址</span>
        </view>
        <view class="right">
          <van-icon name="arrow" />
        </view>
      </view>
      <!-- 图文详情以及规格参数 -->
      <van-tabs :active="0" animated>
        <van-tab title="图文详情">
          <view v-html="good.goods_introduce"></view>
        </van-tab>
        <van-tab title="规格参数">
          <view class="attrs">
            <view :class="index === 0 ? 'item top' : 'item'" v-for="(item, index) in good.attrs" :key="index">
              <view class="name">
                <text>{{ item.attr_name }}</text>
              </view>
              <view class="value">
                <text>{{item.attr_value}}</text>
              </view>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>
    <!-- 购买组件 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goShopCar" :info="shopcarlen"/>
      <van-goods-action-button
        text="加入购物车"
        type="warning"
        @click="addShopCar"
      />
      <van-goods-action-button text="立即购买" />
    </van-goods-action>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsid:'',
        good: {},
        shopcarlen: wx.getStorageSync("shopcarlist").length || 0,
        activeTab:0,
      }
    },
    onLoad(options){
      this.goodsid = options.goods_id
      this.getGoodsDetail(options.goods_id)
    },
    methods: {
      async getGoodsDetail(key){
        let {data} = await uni.$http.get('goods/detail?goods_id='+key)
        if(data.meta.status !== 200) return wx.showToast({title:"数据请求失败!"})
        this.good = {...data.message, is_collected:false}
        // console.log(data.message);
      },
      goShopCar(){
        wx.switchTab({
          url:"/pages/cart/cart"
        })
      },
      shoucang(key){
        if(key){
          this.good.is_collected=true
          wx.showToast({title:"已收藏"})
        }else{
          this.good.is_collected=false
          wx.showToast({title:"已收取消藏"})
        }
      },
      addShopCar(){
        let shopcarlist = wx.getStorageSync("shopcarlist") || []
        let key = shopcarlist.findIndex(item =>item.goods_id === this.good.goods_id)
        if(key !== -1){
          shopcarlist[key].goods_count = shopcarlist[key].goods_count + 1
        }else{
          shopcarlist.push({...this.good, goods_count:1})
        }
        this.shopcarlen = shopcarlist.length
        uni.$emit("getshopcarlist", shopcarlist)
        wx.setStorageSync("shopcarlist", shopcarlist)
        wx.showToast({title:"加入成功!"})
      },
      previewImage(e){
        let key = e.target.dataset.src
        let imageList = []
        this.good.pics.forEach(item => {
          imageList.push(item.pics_mid_url)
        })
        wx.previewImage({
          current:key,
          urls:imageList
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  // 内容部分
  .shopdetail{
    background-color: #F0F0F0;
    
    .neirong{
      background-color: #F0F0F0;
      height: calc( 100vh - 100rpx );
      overflow: auto;
      .swiper{
        height: 750rpx;
        .swiper-item{
          width: 100%;
          height: 750rpx;
          img{
            width: 100%;
            height: 750rpx;
          }
        }
      }
      .shopprices{
        background-color: #fff;
        margin-bottom: 16rpx;
        .money{
          color: #e00;
          font-size: 42rpx;
          font-weight: 700;
          padding-left: 10rpx;
          line-height: 90rpx;
        }
        .nameandSC{
          display: flex;
          .name{
            flex: 10;
            font-size: 27rpx;
            padding-right: 40rpx;
            font-weight: 100;
            // text-shadow: 1rpx 0 0 #000;
            border-right: 2rpx solid #eee;
            padding-left: 10rpx;
          }
          .shoucang{
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .shoucangzi{
              font-size: 24rpx;
            }
          }
        }
        .myf{
          line-height: 75rpx;
          font-size: 27rpx;
          padding-left: 10rpx;
        }
      }
      // 促销和已选部分
      .cu_xuan{
        background-color: #fff;
        height: 160rpx;
        margin-bottom: 16rpx;
        padding: 0 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span:first-child{
          font-size: 24rpx;
          padding-right: 20rpx;
        }
        span:last-child{
          font-size: 24rpx;
          color: #777;
        }
      }
      // 选择收货地址部分
      .buyaddr{
        background-color: #fff;
        padding: 10rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        line-height: 60rpx;
        height: 60rpx;
        font-size: 24rpx;
        >.left{
          >span:last-child{
            color: #777;
            padding: 0 20rpx;
          }
        }
      }
      .attrs{
        .item{
          display: flex;
          font-size: 20rpx;
          background-color: #fff;
          margin-bottom: 1rpx;
          height: 80rpx;
          .name{
            flex: 2;
            border-right: 1rpx solid #eee;
            padding: 6rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
          }
          .value{
            flex:3;
            padding: 6rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
          }
        }
        .top{
          margin-top: 1rpx;
        }
      }
    }
    // 底部立即购买固定位置
    .bottom{
      position: fixed;
      bottom: 0;
      height: 100rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 8rpx 12rpx;
      background-color: white;
      display: flex;
      .kefu,.shopcar{
        flex: 1;
        // background-color: red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon{
          font-size: 36rpx;
        }
        .text{
          font-size: 22rpx;
        }
        
      }
      .button{
        flex: 5;
        display: flex;
        >view{
          flex: 1;
          text-align: center;
          line-height: 84rpx;
          color: white;
        }
        .btnleft{
          
          border-radius: 42rpx 0 0 42rpx;
          // background-color: orange;
          background: linear-gradient(90deg,#FFC811, #FE8813);;
        }
        .btnright{
          border-radius: 0 42rpx 42rpx 0;
          // background-color: #e00;
          background: linear-gradient(90deg, #F8672A, #EE181E);
        }
      }
    }
  }
</style>
